<template>
    <!-- {{ $route.fullPath }}
    {{ $router.options.routes }} -->
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        :default-active="$route.path" text-color="#fff" unique-opened :router="true">
        <!--一级菜单-->
        <template v-for="item in $router.options.routes">
            <el-menu-item :index="item.path" v-if="item.children == undefined && item.meta.show== true">
                <!-- <el-icon><icon-menu /></el-icon> -->
                <component :is="item.meta.icon" class="icon"></component>
                <span>{{ item.meta.title }}</span>
            </el-menu-item>

            <el-sub-menu :index="item.path" v-if="item.children != undefined && item.meta.show == true">
                <template #title>
                    <component :is="item.meta.icon" class="icon"></component>
                    <span>{{item.meta.title}}</span>
                </template>
                <el-menu-item-group>
                    <!--不能直接加for 循环 -->
                    <template v-for="child in item.children">
                        <el-menu-item :index="child.path">
                            <component :is="child.meta.icon" class="icon"></component>
                            <span>{{ child.meta.title }}</span>
                        </el-menu-item>
                    </template>

                </el-menu-item-group>
            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script setup>



</script>

<style scoped>
.el-menu{
    height: calc(100vh - 40px);
}
.icon{
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
</style>